<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>

    <input  type="text" v-model="message" />

    <button @click="doAdd">+增加</button>


    <hr/>
    <ul>
      <li v-for="(item,key) in list">{{item}} --- <button data-id="key" v-on:click="doDelete(key)">删除</button></li>
    </ul>

  
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      message: "",
      list: []
    };
  },
  methods: {
    doAdd() {
      //获取文本框的值
      this.list.push(this.message);
    },
    doDelete(key) {
      //在key的位置删除一个节点
      this.list.splice(key,1);
    }
  }
};
</script>

<style>
</style>
